<script setup lang="ts">
import BasicSetting from './components/basic-setting.vue'
import SecuritySetting from './components/security-setting.vue'
import AccountSetting from './components/account-setting.vue'
import MessageSetting from './components/message-setting.vue'

const selectedKeys = ref(['1'])

const items = [
  {
    key: '1',
    label: '基本设置',
    title: 'Navigation One',
  },
  {
    key: '2',
    label: '安全设置',
    title: 'Navigation Two',
  },
  {
    key: '3',
    label: '账号绑定',
    title: 'Navigation Two',
  },
  {
    key: '4',
    label: '新消息通知',
    title: 'Navigation Two',
  },
]
</script>

<template>
  <a-card>
    <a-row :gutter="24">
      <a-col :span="4" style="padding-left: 0;">
        <a-menu
          v-model:selectedKeys="selectedKeys"
          style="width: 250px"
          mode="inline"
          :items="items"
        />
      </a-col>
      <a-col :span="20">
        <BasicSetting v-if="selectedKeys[0] === '1'" />
        <SecuritySetting v-if="selectedKeys[0] === '2'" />
        <AccountSetting v-if="selectedKeys[0] === '3'" />
        <MessageSetting v-if="selectedKeys[0] === '4'" />
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped lang="less">

</style>
